<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center SearchWolves_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub SearchWolves_fd0_0'>
          <view class='flex flex-wrap align-center SearchWolves_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <view>
              <benben-flex-tabs class-name='home_benbenTabsfd0_0_c0_c0' v-model="tabsTypefd0_0_c0_c0"
                ref="benben_tabsfd0_0_c0_c0" select-mark="benben_tabsfd0_0_c0_c0" key="benben_tabsfd0_0_c0_c0"
                :open-title-type='false' :open-sticky='true' :top='0' :is-show-content='false' :scrollspy='false'
                :tabs-info.sync="tabsInfofd0_0_c0_c0">

                <scroll-view @scroll="tabsInfofd0_0_c0_c0.scrollX = $event.detail.scrollLeft"
                  id="benben_tabsfd0_0_c0_c0" class="benben-tabs" style="width:750rpx" :scroll-x="true"
                  :scroll-left.sync="tabsInfofd0_0_c0_c0.moveX" scroll-with-animation="all .3s ease">
                  <view class="benben-tabs-content" id="benben_tabsfd0_0_c0_c0-content">
                    <view id="benben_tabsfd0_0_c0_c0-title"
                      class="benben-tabs-title flex flex align-center justify-around">
                      <view
                        :class="{ 'checkTitlefd0_0_c0_c0': tabsTypefd0_0_c0_c0 == '1', 'flex flex-wrap align-center': true }"
                        @tap.stop="chooseTab('1') " :id="`benben_tabsfd0_0_c0_c0-title-item-${'1'}`">

                        <text>企业</text>

                      </view>
                      <view
                        :class="{ 'checkTitlefd0_0_c0_c0': tabsTypefd0_0_c0_c0 == '3', 'flex flex-wrap align-center': true }"
                        @tap.stop="chooseTab('3')" :id="`benben_tabsfd0_0_c0_c0-title-item-${'3'}`">

                        <text>职业</text>

                      </view>
                      <view
                        :class="{ 'checkTitlefd0_0_c0_c0': tabsTypefd0_0_c0_c0 == '2', 'flex flex-wrap align-center': true }"
                        @tap.stop="chooseTab('2')" :id="`benben_tabsfd0_0_c0_c0-title-item-${'2'}`">

                        <text>自由</text>

                      </view>
                      <!-- <view
                        :class="{ 'checkTitlefd0_0_c0_c0': tabsTypefd0_0_c0_c0 == '4', 'flex flex-wrap align-center': true }"
                        @tap.stop="chooseTab('4')" :id="`benben_tabsfd0_0_c0_c0-title-item-${'4'}`">

                        <text>动态</text>

                      </view> -->
                    </view>
                    <view :style="{ left: tabsInfofd0_0_c0_c0.lineleft, maxWidth: tabsInfofd0_0_c0_c0.lineWidth ,}"
                      id="benben_tabsfd0_0_c0_c0-line"
                      class="benben-tabs-line flex benben-flex-tabs-line home_linefd0_0_c0_c0"></view>
                  </view>
                </scroll-view>

              </benben-flex-tabs>
            </view>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
          </view>
          <view class='flex flex-wrap align-center justify-end SearchWolves_fd0_0_c2' @tap.stop="handleJumpDiy"
            data-type="navigateTo" :data-url="`/pages/tabBar/home/chooseCitye`">
            <image class='SearchWolves_fd0_0_c2_c0' mode="aspectFill" :src='STATIC_URL+"142.png"'></image>
            <text class='SearchWolves_fd0_0_c2_c1'>{{cityname || '请选择'}}</text>
            <image class='SearchWolves_fd0_0_c2_c2' mode="aspectFit" :src='STATIC_URL+"143.png"'></image>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class="flex align-center justify-between">
          <view class='flex flex-wrap align-center SearchWolves_fd1_0'>
            <text class='fu-iconfont2  SearchWolves_fd1_0_c0'>&#xe7c6;</text>
            <!-- <view class="text-999 text-df">找人、找动态、企业、业务范围</view> -->
            <input type="text" style="width: 450rpx;" :placeholder="titledec" confirm-type="done" :maxlength="-1"
              v-model="keywords" :adjust-position='true' placeholder-style="color:#999;font-size:28rpx"
              @confirm="getListFunc()" />
            <image class='searchye_fd0_0_c1_c2' mode="aspectFit" :src='STATIC_URL+"45.png"'
              @tap.stop="clearBoxContentFunc()" v-if=" keywords!=''"></image>
          </view>
          <view class='flex flex-wrap align-center' v-if="tabsTypefd0_0_c0_c0==2 || tabsTypefd0_0_c0_c0==3"
            @click.stop="popupShow1717141171413=true">
            <image class='recommendCommodityList_fd1_1_c0' mode="aspectFit" :src='STATIC_URL+"163.png"'></image>
          </view>
        </view>
        <view class="flex benben-flex-layout flex-wrap align-center">
          <view style="position: relative">
            <swiper ref="benbenSwiperfd3_0" @change="bannerIndexfd3_0 = $event.detail.current"
              class='flex position-relative recommendCommodityList_fd3_0' previous-margin="0rpx" next-margin="0rpx"
              :display-multiple-items="1" :interval="5000" :duration="500" :autoplay='true' :circular='true'>


              <swiper-item v-for="(item,index) in banList" :key="index" class='flex ' @tap.stop="handleJumpDiy"
                data-type="navigateTo" :data-url="item.href">
                <image class='recommendCommodityList_fd3_0_c1_c0' mode="aspectFill" :src='item.thumb'></image>
              </swiper-item>


            </swiper>
            <view style="position: absolute"
              class="flex dot flex align-center justify-center recommendCommodityList_swiperDotfd3_0">
              <template v-for="(item, index) in (banList.length)">
                <view :key="index" v-if="bannerIndexfd3_0 == index"
                  class="flex dot selected flex align-center justify-center recommendCommodityList_swiperDotSelectedfd3_0">
                </view>
                <view :key="index" v-else
                  class="flex dot unselected flex align-center justify-center recommendCommodityList_swiperDotUnselectedfd3_0">
                </view>
              </template>
            </view>
          </view>
        </view>
        <view class='flex flex-wrap align-start justify-between SearchWolves_fd1_1' v-for="(item,index) in dataMessage"
          @click.stop="godetail(item)" :key="index" v-if="tabsTypefd0_0_c0_c0!=4">
          <view class='flex flex-wrap align-start flex-sub'>
            <image class='SearchWolves_fd1_1_c0_c0' mode="aspectFill"
              :src='tabsTypefd0_0_c0_c0==1 ? item.logo : item.avatar'></image>
            <view class='flex flex-direction flex-wrap align-stretch flex-sub SearchWolves_fd1_1_c0_c1'>
              <view class='flex flex-wrap align-end'>
                <text class='SearchWolves_fd1_1_c0_c1_c0_c0' v-if="tabsTypefd0_0_c0_c0==1">{{item.mingcheng}}</text>
                <text class='SearchWolves_fd1_1_c0_c1_c0_c0' v-if="tabsTypefd0_0_c0_c0==2">{{item.nickname}}</text>
                <text class='SearchWolves_fd1_1_c0_c1_c0_c0' v-if="tabsTypefd0_0_c0_c0==3">{{ item.nickname}}</text>
                <text class='SearchWolves_fd1_1_c0_c1_c0_c1'>{{item.distance || '0m' }}</text>
              </view>
              <view class='flex flex-wrap align-center'>
                <text class='text-333 text-df margin-right-sm' v-if="tabsTypefd0_0_c0_c0==3 ||
                  tabsTypefd0_0_c0_c0==2">{{item.mingcheng}}</text>
                <text class=' SearchWolves_fd1_1_c0_c1_c1_c0'>{{item.zhiye}}</text>
              </view>
              <view class=' flex flex-wrap align-center'>
                <text v-if="tabsTypefd0_0_c0_c0!=1 && indexC<9" class='text-cut SearchWolves_fd1_1_c0_c1_c2_c0'
                  v-for="(itemC,indexC) in item.freeindustryattributes_name" :key="indexC">{{itemC}}</text>
                <text v-if="tabsTypefd0_0_c0_c0==1 && indexC<9" class='text-cut SearchWolves_fd1_1_c0_c1_c2_c0'
                  v-for="(itemC,indexC) in item.company_service_list" :key="indexC">{{itemC}}</text>
              </view>
            </view>
          </view>
          <view class='flex flex-wrap align-center' v-if="tabsTypefd0_0_c0_c0!=1" @click.stop="collect(item)">
            <text>{{item.is_follow==0 ? '+关注' : '已关注'}}</text>
          </view>
        </view>
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if=" tabsTypefd0_0_c0_c0=='4'">
          <view class='flex flex-wrap align-start recommendCommodityList_fd2_0' v-for='(item,key0) in dataMessage'
            :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/homePage/dongDetail/dongDetail?id=${item.aid}`">
            <image class='recommendCommodityList_fd2_0_c0' mode="aspectFill" :src='item.avatar'></image>
            <view class='flex flex-direction flex-wrap align-stretch flex-sub recommendCommodityList_fd2_0_c1'>
              <view class='flex flex-wrap align-center justify-between recommendCommodityList_fd2_0_c1_c0'
                @tap.stop="handleJumpDiy" data-type="navigateTo"
                :data-url="`/pages/grzx/userHome/userHome?aid=${item.user_id}`">
                <view class='flex flex-direction flex-wrap align-stretch recommendCommodityList_fd2_0_c1_c0_c0'>
                  <text class='recommendCommodityList_fd2_0_c1_c0_c0_c0'>{{item.user_name}}</text>
                  <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c0_c0_c1'>
                    <text v-if="item.company_name" class="text-lg margin-right-sm">{{item.company_name}}</text>
                    <text class='recommendCommodityList_fd2_0_c1_c0_c0_c1_c1'>{{item.zhiye}}</text>
                  </view>
                </view>
                <view class='flex flex-wrap align-center' @click.stop="collect(item)">
                  <text class='recommendCommodityList_fd2_0_c1_c0_c1_c0'>{{item.is_follow==0 ? '+关注' : '已关注'}}</text>
                </view>
              </view>
              <view class='flex flex-direction flex-wrap align-stretch recommendCommodityList_fd2_0_c1_c1'>
                <view class='flex-sub recommendCommodityList_fd2_0_c1_c1_c0'>
                  <text class='recommendCommodityList_fd2_0_c1_c1_c0_c0'>{{item.title}}</text>
                </view>
              </view>
              <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2'
                v-if="item.postType=='image'">
                <template v-for='(child,key1) in item.thumb'>
                  <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2_c0' :key='key1'>
                    <image class='recommendCommodityList_fd2_0_c1_c2_c0_c0' mode="aspectFill" :src='child'
                      @tap.stop="multiImagePreview(child,item.thumb,'')"></image>
                  </view>
                </template>

              </view>
              <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2'
                v-if="item.postType=='video'">
                <view class='flex flex-wrap align-center recommendCommodityList_fd2_0_c1_c2_c0 position-relative'>
                  <image class='recommendCommodityList_fd2_0_c1_c2_c0_c0' mode="aspectFill" :src='item.video_img'>
                  </image>
                  <image class='playd' mode="aspectFit" :src='STATIC_URL+"playd.png"'></image>
                </view>

              </view>
              <view class='flex flex-wrap align-center'>
                <text class='recommendCommodityList_fd2_0_c1_c3_c0'>{{item.create_time}}</text>
                <!-- <text class='recommendCommodityList_fd2_0_c1_c3_c1'>{{item.create_time}}</text> -->
              </view>
              <view class='flex flex-wrap align-center justify-between recommendCommodityList_fd2_0_c1_c4'>
                <view class='flex flex-wrap align-center'>
                  <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' mode="aspectFit" :src='STATIC_URL+"158.png"'>
                  </image>
                  <text class='recommendCommodityList_fd2_0_c1_c4_c0_c1'>{{item.share_count }}</text>
                </view>
                <view class='flex flex-wrap align-center'>
                  <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' mode="aspectFit" :src='STATIC_URL+"159.png"'>
                  </image>
                  <text class='recommendCommodityList_fd2_0_c1_c4_c0_c1'>{{item.comment_count }}</text>
                </view>
                <view class='flex flex-wrap align-center ' @click.stop="like(item)">
                  <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' v-if="item.isLike==1" mode="aspectFit"
                    :src='STATIC_URL+"161.png"'>
                  </image>
                  <image class='recommendCommodityList_fd2_0_c1_c4_c0_c0' v-if="item.isLike==0" mode="aspectFit"
                    :src='STATIC_URL+"189.png"'>
                  </image>
                  <text class='recommendCommodityList_fd2_0_c1_c4_c0_c1'>{{item.like_count }}</text>
                </view>
              </view>
            </view>
          </view>

        </view>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---flex布局flex布局结束-->

      <benben-popup v-model="popupShow1717141171413" :mask="true" :mask-close-able="true" mode='right' :z-index='999'>
        <!---flex布局flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
          <view class='flex flex-direction flex-wrap align-stretch recommendCommodityList_fd5_0'>
            <text class='recommendCommodityList_fd5_0_c0'>筛选</text>
            <text class='recommendCommodityList_fd5_0_c1'>行业属性</text>
            <view class='flex flex-wrap   heigh-box'>
              <view class='flex flex-wrap align-center justify-center recommendCommodityList_fd5_0_c2_c0'
                :class="dustry_id==item.aid? 'active' : ''" v-for="(item,index) in hyList" :key="index"
                @click.stop='choosehy(item)'>
                <text>{{item.name}}</text>
              </view>
            </view>
            <view class='flex align-center justify-between recommendCommodityList_fd5_0_c3'>
              <button class='recommendCommodityList_fd5_0_c3_c0' @tap.stop="clearS">重置</button>
              <button class='recommendCommodityList_fd5_0_c3_c1' @tap.stop="search">确认</button>
            </view>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>
    </view>
  </page-body>
</template>
<script>
  import {
    TUILogin
  } from "@tencentcloud/tui-core";
  import {
    SYSTEM_CONFIG,
    SDKAppID,
    secretKey
  } from "@/common/config.js";
  import {
    TUIChatKit,
    genTestUserSig
  } from "@/TUIKit";
  import {
    vueVersion
  } from "@/TUIKit/adapter-vue";
  import TencentCloudChat from '@tencentcloud/chat';
  import {
    TUIConversationService
  } from '@tencentcloud/chat-uikit-engine';
  import pagingList from '@/common/mixin/paging_list.js';
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        bannerIndexfd3_0: 0,
        banList: [],
        hyList: [],
        dustry_id: '',
        popupShow1717141171413: false,
        "tabsInfofd0_0_c0_c0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "tabsTypefd0_0_c0_c0": "1",
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "dataMessage": [],
        keywords: '',
        cityname: '',
        citycode: '',
        region_code: '',
        lat: '',
        lng: '',
        titledec: '请输入企业名称'
      };
    },
    computed: {
      userInfo: {
        get() {
          return this.$store.state.userInfo
        },
        set() {
          this.$store.commit('updateUserInfo', value)
        },
      },
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {
      this.$api.post(global.apiUrls.post664eb892f02d1, {
        flag: '1'
      }).then(res => {
        if (res.data.code == 1) {
          this.hyList = res.data.data
        }
      })
      this.$api.post(global.apiUrls.post641e624160dd0, {
        type: 1
      }).then(res => {
        if (res.data.code == 1) {
          this.banList = res.data.data
        }
      })
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      let that = this
      if (this.isLogin) {

        const userID = this.userInfo ? this.userInfo.id.toString() : '';
        let config = {
          userID: userID, //User ID
          SDKAppID: SDKAppID, // Your SDKAppID
          secretKey: secretKey, // Your secretKey
        }
        const userSig = genTestUserSig(config).userSig;
        TUILogin.login({
          SDKAppID: config.SDKAppID,
          userID: config.userID,
          userSig: userSig,
          // 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
          useUploadPlugin: true,
          useProfanityFilterPlugin: false,
          framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3
        }).then(() => {
          if (TUILogin.chat.isReady()) {
            let nums = TUILogin.chat.getTotalUnreadMessageCount();
            that.getData(nums)
          }
        })



      }
      if (uni.getStorageSync('cityinfo')) {
        that.cityinfo = JSON.parse(uni.getStorageSync('cityinfo'))
        that.lat = that.cityinfo.lat
        that.lng = that.cityinfo.lng
        that.cityname = that.cityinfo.text
        that.citycode = that.cityinfo.code
        that.region_code = that.cityinfo.code
        console.log('that.citycode', that.region_code)
        that.getListFunc()
      } else {
        if (uni.getStorageSync('once')) {
          that.getListFunc()
        } else {
          that.getLocation()
        }


      }
      // #ifdef H5
      that.getListFunc()
      // #endif
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      choosehy(item) {
        this.dustry_id = item.aid
        // item.is_show = !item.is_show
      },
      //是否显示显示全部下拉弹窗
      search() {
        this.popupShow1717141171413 = false
        this.getListFunc()
      },
      clearS() {
        this.dustry_id = ''
        this.$api.post(global.apiUrls.post664eb892f02d1).then(res => {
          if (res.data.code == 1) {
            this.hyList = res.data.data
          }
        })
        this.popupShow1717141171413 = false
        this.getListFunc()
      },
      gosearch() {
        uni.navigateTo({
          url: `/pages/homePage/recommendCommodityList/recommendCommodityList?cateId=${this.tabsTypefd0_0_c0_c0}&keyword=${this.keywords}`
        })
      },
      getData(nums) {
        this.$api.post(global.apiUrls.post64241ca6cf066).then(res => {
          if (res.data.code == 1) {
            this.likeCount = res.data.data.likeCount
            this.commentCount = res.data.data.commentCount
            this.fanCount = res.data.data.fanCount
            this.articleNum = res.data.data.article
            let allNum = res.data.data.all
            let all = parseFloat(nums) + parseFloat(allNum)
            if (all) {
              uni.setTabBarBadge({
                index: 2,
                text: all.toString()
              })
            } else {
              uni.removeTabBarBadge({
                index: 2
              })
            }
          }
        })
      },
      searchCom() {
        this.getListFunc()
      },
      getLocation() {
        let that = this
        uni.showModal({
          title: '用户获取当前位置权限',
          content: '用于获取周边信息，以更好的快速使用',
          success: function(res1) {
            uni.setStorageSync('once', '1')
            if (res1.confirm) {
              uni.getLocation({
                type: 'gcj02',
                geocode: true,
                success: (res) => {
                  that.lat = res.latitude;
                  that.lng = res.longitude;
                  that.$api.post(global.apiUrls.post6524b6d2a8964, {
                    lng: that.lng,
                    lat: that.lat
                  }).then(ress => {
                    if (ress.data.code == 1) {
                      console.log(',,,,,,', ress.data.data)
                      that.cityname = ress.data.data.city
                      that.citycode = ress.data.data.citycode
                      that.region_code = ress.data.data.citycode
                      let cityall = {
                        lat: that.lat,
                        lng: that.lng,
                        text: that.cityname,
                        code: that.region_code,
                        province: ress.data.data.province,
                        provinceCode: ress.data.data.provinceCode
                      }
                      console.log('lllllll', cityall)
                      uni.setStorageSync('cityinfo', JSON.stringify(cityall))
                      that.getListFunc()
                    }
                  })
                },
                complete: (complete) => {
                  console.log('complete', complete)
                }
              })
            }
          }
        })

      },
      godetail(item) {
        if (this.tabsTypefd0_0_c0_c0 == 1) {
          uni.navigateTo({
            url: `/pages/homePage/enterpriseDetails/enterpriseDetails?aid=${item.company_id}`
          })
        } else if (this.tabsTypefd0_0_c0_c0 == 3) {
          uni.navigateTo({
            url: `/pages/grzx/userHome/userHome?aid=${item.id}`
          })
          // if (item.company_id) {
          //   uni.navigateTo({
          //     url: `/pages/homePage/enterpriseDetails/enterpriseDetails?aid=${item.company_id}`
          //   })
          // }
        } else {
          uni.navigateTo({
            url: `/pages/grzx/userHome/userHome?aid=${item.id}`
          })
        }
      },
      chooseTab(type) {
        if (type == 1) {
          this.titledec = '请输入企业名称'
        } else if (type == 2) {
          this.titledec = '请输入业务内容'
        } else {
          this.titledec = '请输入业务内容'
        }
        this.tabsTypefd0_0_c0_c0 = type
        this.getListFunc()
      },
      collect(item) {
        this.$api.post(global.apiUrls.post66505b8b64564, {
          user_id: item.id
        }).then(res => {
          if (res.data.code == 1) {
            if (item.is_follow == 1) {
              item.is_follow = 0
            } else {
              item.is_follow = 1
            }
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      clearBoxContentFunc() {
        this.keywords = ''
        this.getListFunc()
      },
      getListFunc() {
        let urldata = ''
        let dataMsg = {}
        if (this.tabsTypefd0_0_c0_c0 == 1) {
          urldata = global.apiUrls.post6651b78154bee
          dataMsg.keywords = this.keywords
          dataMsg.city = this.cityname
          dataMsg.lat = this.lat
          dataMsg.lng = this.lng
        } else if (this.tabsTypefd0_0_c0_c0 == 2 || this.tabsTypefd0_0_c0_c0 == 3) {
          urldata = global.apiUrls.post6651b71c80939
          dataMsg.user_group = this.tabsTypefd0_0_c0_c0
          dataMsg.keywords = this.keywords
          dataMsg.city = this.cityname
          dataMsg.lat = this.lat
          dataMsg.lng = this.lng
          dataMsg.dustry_id = this.dustry_id
        } else {
          urldata = global.apiUrls.post6458a3d122c06
          dataMsg.keywords = this.keywords
          dataMsg.city = this.cityname
          dataMsg.lat = this.lat
          dataMsg.lng = this.lng
        }
        this.minixPagingListsApi = urldata;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = dataMsg
        this.listData = [];
        this.dataMessage = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      }
    }
  };
</script>
<style lang="scss" scoped>
  .recommendCommodityList_fd3_0_c1_c0 {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
  }

  .recommendCommodityList_swiperDotSelectedfd3_0 {
    border: 1px solid var(--benbenbdColor1);
    background: var(--benbenbgColor1);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: var(--benbenFontColor3);
  }

  .recommendCommodityList_swiperDotUnselectedfd3_0 {
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    width: 16rpx;
    height: 16rpx;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    margin: 0rpx 6rpx 0rpx 0rpx;
    font-size: 24rpx;
    color: #fff;
  }


  .recommendCommodityList_fd3_0 {
    width: 686rpx;
    height: 180rpx;
    border-radius: 16rpx;
    left: 32rpx;
    top: 16rpx;
  }

  ::v-deep .recommendCommodityList_swiperDotfd3_0 {
    position: absolute;
    bottom: 20rpx;
    left: 0rpx;
    right: 0rpx;
  }

  .searchye_fd0_0_c1_c2 {
    width: 28rpx;
    height: 28rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .playd {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    top: 33%;
    left: 33%;
  }

  .recommendCommodityList_fd2_0_c1_c4_c0_c1 {
    color: var(--benbenFontColor2);
  }

  .recommendCommodityList_fd2_0_c1_c4_c0_c0 {
    width: 32rpx;
    height: 32rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c4 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c3_c1 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: var(--benbenFontColor2);
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .recommendCommodityList_fd2_0_c1_c3_c0 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: var(--benbenFontColor2);
  }

  .recommendCommodityList_fd2_0_c1_c2_c0_c0 {
    width: 180rpx;
    height: 180rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .recommendCommodityList_fd2_0_c1_c2_c0 {
    margin: 12rpx 8rpx 12rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c2 {
    padding: 12rpx 0rpx 0rpx 8rpx;
  }

  .recommendCommodityList_fd2_0_c1_c1_c0_c0 {
    line-height: 46rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
    padding: 0rpx 30rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c1_c0 {
    color: rgba(119, 119, 119, 1);
  }

  .recommendCommodityList_fd2_0_c1_c1 {
    position: relative;
    padding: 0rpx 0rpx 0rpx 16rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c1_c0 {
    font-size: 24rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0_c1_c1 {
    color: var(--benbenFontColor2);
    // margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0_c1 {
    font-size: 28rpx;
    margin: 06rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0_c0 {
    // font-weight: 600;
    font-size: 32rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0_c0 {
    margin: 0rpx 0rpx 0rpx 16rpx;
    width: 400rpx;
  }

  .recommendCommodityList_fd2_0_c1_c0 {
    margin: 0rpx 0rpx 12rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c1 {
    margin: 0rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd2_0_c0 {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
  }

  .recommendCommodityList_fd2_0 {
    border-bottom: 1px solid #eee;
    padding: 24rpx;
    width: 702rpx;
    margin: 24rpx auto 0rpx auto;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1);
  }

  .recommendCommodityList_fd5_0_c3_c1 {
    background: #5ECA71;
    border-radius: 0rpx 36rpx 36rpx 0rpx;
    width: 240rpx;
    line-height: 72rpx;
    font-size: 24rpx;
    color: #fff;
    height: 72rpx;
  }

  .recommendCommodityList_fd5_0_c3_c0 {
    background: #FFCD51;
    border-radius: 36rpx 0rpx 0rpx 36rpx;
    width: 240rpx;
    line-height: 72rpx;
    font-size: 24rpx;
    color: #fff;
    height: 72rpx;
  }

  .recommendCommodityList_fd5_0_c3 {
    margin: 50rpx 0rpx 0rpx 0rpx;
  }

  .heigh-box {
    max-height: 750rpx;
    overflow-y: scroll;
  }

  .recommendCommodityList_fd5_0_c2_c0 {
    background: #F8F8F8;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 150rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin: 16rpx 16rpx 0rpx 0rpx;

    &.active {
      border: 1rpx solid #5ECA71;
      background-color: #FFFFFF;
      color: #5ECA71;
    }
  }

  .recommendCommodityList_fd5_0_c1 {
    font-size: 36rpx;
    font-weight: 500;
    margin: 35rpx 0rpx 35rpx 0rpx;
  }

  .recommendCommodityList_fd5_0_c0 {
    font-size: 36rpx;
    font-weight: 500;
  }

  .recommendCommodityList_fd5_0 {
    background: var(--benbenbgColor1);
    background-size: 100% auto;
    padding: 24rpx;
    width: 546rpx;
    height: 100vh;
    margin: 88rpx 0rpx 0rpx 0rpx;
  }

  .recommendCommodityList_fd1_1_c0 {
    width: 30rpx;
    height: 30rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 18rpx 32rpx 0rpx 0rpx;
  }

  ::v-deep .home_benbenTabsfd0_0_c0_c0 {
    width: 350rpx;
    white-space: nowrap;
    text-align: center;
    height: 88rpx;
    font-size: 32rpx;
  }

  .home_linefd0_0_c0_c0 {
    background: var(--benbenbgColor2);
    width: 100rpx;
    height: 8rpx;
    top: 70rpx;
    background-size: 100% 100% !important;
    border-radius: 44rpx;
  }

  .checkTitlefd0_0_c0_c0 {
    font-weight: 700 !important;
    font-size: 28rpx !important;
    color: #5ECA71 !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);
    background-size: 100% auto;
  }

  .SearchWolves_flex_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .SearchWolves_fd0_0_c2_c2 {
    width: 10rpx;
    height: 6rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .SearchWolves_fd0_0_c2_c1 {
    margin: 0rpx 6rpx 0rpx 6rpx;
  }

  .SearchWolves_fd0_0_c2_c0 {
    width: 32rpx;
    height: 32rpx;
  }

  .SearchWolves_fd0_0_c2 {
    width: 150rpx;
  }

  .SearchWolves_linefd0_0_c0_c0 {
    background: var(--benbenbgColor2);
    width: 100rpx;
    height: 8rpx;
    top: 70rpx;
    background-size: 100% auto !important;
    border-radius: 16rpx;
  }

  .checkTitlefd0_0_c0_c0 {
    font-weight: 700 !important;
    font-size: 32rpx !important;
    color: #333 !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  ::v-deep .SearchWolves_benbenTabsfd0_0_c0_c0 {
    background: var(--benbenbgColor4);
    width: 350rpx;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
    color: rgba(170, 170, 170, 1);
  }

  .SearchWolves_fd0_0_c0 {
    width: 350rpx;
  }

  .SearchWolves_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .SearchWolves_fd1_1_c0_c1_c2_c0 {
    border: 1px solid #ED914A;
    background: #FFFFFF;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    color: var(--benbenFontColor6);
    font-size: 24rpx;
    padding: 6rpx 10rpx 6rpx 10rpx;
    margin: 0rpx 12rpx 12rpx 0rpx;
    width: 100rpx;
    text-align: center;
  }

  .SearchWolves_fd1_1_c0_c1_c1_c0 {
    font-size: 24rpx;
    color: rgba(170, 170, 170, 1);
    margin: 8rpx 0rpx 8rpx 0rpx;
  }

  .SearchWolves_fd1_1_c0_c1_c0_c1 {
    color: rgba(170, 170, 170, 1);
    font-size: 24rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .SearchWolves_fd1_1_c0_c1_c0_c0 {
    font-size: 30rpx;
    font-weight: 600;
  }

  .SearchWolves_fd1_1_c0_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .SearchWolves_fd1_1_c0_c0 {
    width: 120rpx;
    height: 120rpx;
    border-radius: 16rpx;
  }

  .SearchWolves_fd1_1 {
    background: #FFFFFF;
    margin: 24rpx auto 0rpx auto;
    width: 686rpx;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.08);
    padding: 24rpx;
  }

  .SearchWolves_fd1_0_c0 {
    margin: 0rpx 24rpx 0rpx 0rpx;
    color: rgba(153, 153, 153, 1);
  }

  .SearchWolves_fd1_0 {
    background: #F9F9F9;
    border-radius: 34rpx 34rpx 34rpx 34rpx;
    width: 600rpx;
    height: 64rpx;
    margin: 24rpx auto 0rpx auto;
    padding: 0rpx 24rpx 0rpx 24rpx;
  }
</style>
